<template>
  <div id="app">
    <header>
      <div class="portrait">
        <img src="../../../assets/images/portrait.png" alt="">
      </div>
      <h4>一只会飞的企鹅</h4>
      <img src="../../../assets/images/yetSmrz-icon.png" alt="" class="smrz-icon">
    </header>
    <ul>
      <li><div>真实姓名<em>*</em></div><span>{{realNameData.bankAccountName}}</span></li>
      <li><div>身份证号<em>*</em></div><span>{{realNameData.cardNo}}</span></li>
      <li><div>手机号<em>*</em></div><span>{{realNameData.mobileNo}}</span></li>
      <li><div>银行名称<em>*</em></div><span>{{realNameData.bankName}}</span></li>
      <li><div>银行卡号<em>*</em></div><span>{{realNameData.bankAccountNo}}</span></li>
    </ul>
  </div>
</template>

<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  export default {
    name: "real-name",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data(){
      return {
        realNameData:[]
      }
    },
    methods:{
      _queryRealName(){
        let _this = this
        this.$http({
          url: '/bank/trade/bank/biz/query/status/list',
          method: 'post',
          data: {userUid:localStorageGet('userUid')},
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            //console.log(response);
            if(response.data.data.rc = 200){
              _this.realNameData = response.data.data[0]
            }
            console.log(_this.realNameData);
          })
          .catch(function (error) {
            console.log(error);
          })
      }
    },
    created(){
      this._queryRealName()
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      height: 9rem;
      background: #ff9500;
      box-sizing: border-box;
      padding: 1.36rem 0.5rem 0;
      p {
        font-size: 0.554rem;
        color: #fff;
      }
      .portrait {
        border-radius: 50%;
        width: 2.794rem;
        margin: 0 auto 0.5rem;
      }
      h4 {
        font-size: 0.64rem;
        text-align: center;
        color: #fff;
        font-weight: normal;
        line-height: 1.8rem;
      }
      .smrz-icon {
        width: 3.62rem;
        margin: 0 auto;
      }
    }
    ul {
      background: #fff;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      li {
        font-size: 0.597rem;
        line-height: 1.877rem;
        margin-left: 0.5rem;
        border-bottom: 1px solid #dcdcdc;
        display: flex;
        &:last-child{
          border-bottom: 0;
        }
        div {
          flex: 3;
          em {
            color: #ff4e33;
            margin-left: 0.3rem;
          }
        }
        span {
          font-size: 0.554rem;
          flex: 7;
        }
      }
    }
  }
</style>
